<template>
  <div class="menu">
    <el-menu
      :router="linkFlag"
      default-active="1"
      class="el-menu-vertical-demo"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">

      <el-menu-item index="/">
        <i class="el-icon-menu"></i>
        <span slot="title">分销商城</span>
      </el-menu-item>

      <el-submenu index="/product-type">
        <template slot="title">
          <i class="el-icon-goods"></i>
          <span>商品管理</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="/product-type">商品类别</el-menu-item>
          <el-menu-item index="product-list">商品列表</el-menu-item>
          <el-menu-item index="/popular">商品受欢迎排行榜</el-menu-item>
        </el-menu-item-group>
      </el-submenu>

      <el-submenu index="3">
        <template slot="title">
          <i class="el-icon-mobile-phone"></i>
          <span>分销管理</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="/rule">分销规则</el-menu-item>
          <el-menu-item index="/commission-list">佣金列表明细</el-menu-item>
        </el-menu-item-group>
      </el-submenu>

      <el-menu-item index="/order">
        <i class="el-icon-s-order"></i>
        <span slot="title">订单明细</span>
      </el-menu-item>

      <el-menu-item index="/profit">
        <i class="el-icon-coin"></i>
        <span slot="title">盈利情况</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
  export default {
    name: 'Menu',
    data() {
      return {
        linkFlag:true
      };
    },
    methods: {

    }
  }
</script>
<style lang="less" scoped>
  .menu{
    width: 250px;
    height: 100%;
    .el-menu{
      height: 100%;
      border-right: none;
    }
  }
</style>
